import React, { Component } from 'react';
import style from './index.module.scss'
import { LoginApi } from '@/api/LoginRegister'
import { Toast } from 'antd-mobile'
class index extends Component {
    state = {
        user: {
            phone: '18710396085',
            pass: '123456'
        }
    }

    toRegister = () => {
        this.props.history.push('/Register')
    }

    changeVal = (e) => {
        this.setState({
            user: {
                ...this.state.user,
                [e.target.name]: e.target.value
            }
        })
    }

    // 点击登录时

    Login = () => {
        let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
        // 非空验证
        if (this.state.user.phone && this.state.user.pass) {
            // 判断输入账号格式
            if (reg.test(this.state.user.phone)) {
                LoginApi({
                    phone: this.state.user.phone,
                    pass: this.state.user.pass
                }).then(res => {
                    if (res.data.code === 200) {
                        Toast.show({
                            content: '登录成功',
                        })
                        console.log(res.data);
                        sessionStorage.setItem("userid", res.data.userinfo.id)
                        sessionStorage.setItem("cdfToken", res.data.token)
                        sessionStorage.setItem("username", this.state.user.phone)
                        this.props.history.push('/Home')
                    }
                })

            } else {
                Toast.show({
                    content: '账号格式错误',
                })
            }

        } else {
            Toast.show({
                content: '账号或密码不能为空',
            })
        }

    }


    render() {
        return (
            <div className={style.login}>
                <div className={style.loginBox}>
                    <img src="http://180.76.99.14:3000/static/media/logo.c6ba1ca4b6ac0b8b1427.png" alt="" />
                    <h3>用户登录</h3>
                    <div className={style.input}>
                        <input type="text" placeholder='请输入账号' name='phone' value={this.state.phone} onChange={this.changeVal} />
                        <input type="text" placeholder='请输入密码' name="pass" value={this.state.pass} onChange={this.changeVal} />
                    </div>
                    <button className={style.button1} onClick={this.Login} >
                        立即登录
                    </button>
                    <button className={style.button2} onClick={this.toRegister}>
                        用户注册
                    </button>
                </div>
            </div>
        );
    }
}

export default index;